<template>
  <view class="page">
    <Navbar :title="pageTitle" />
    <u-sticky customNavHeight="0" z-index="6">
      <u-image
        show-loading
        :src="detail.cover_img"
        width="100%"
        height="248px"
        @click="preImage"
      />
    </u-sticky>
    <view class="body">
      <view class="tag">丘山阅</view>
      <view class="mark">丘山阅镇</view>
      <Sub-title :label="detail.site_name" bottom-color="#E9F4F4" />
      <view class="base">
        <view>
          <u-text
            :text="detail.open_hours || '-'"
            prefix-icon="clock-fill"
            icon-style="font-size: 28rpx; color: #3BA199; margin-right: 20rpx"
            lines="1"
            line-height="60rpx"
            color="#555555"
            size="28rpx"
          />
          <u-text
            :text="detail.address || '-'"
            prefix-icon="map-fill"
            icon-style="font-size: 28rpx; color: #1A98FC; margin-right: 20rpx"
            lines="1"
            line-height="60rpx"
            color="#555555"
            size="28rpx"
            @click="handleMap"
          />
          <u-text
            :text="detail.phone || '-'"
            prefix-icon="phone-fill"
            icon-style="font-size: 28rpx; color: #2CB9A4; margin-right: 20rpx"
            lines="1"
            line-height="60rpx"
            color="#555555"
            size="28rpx"
            @click="callPhone"
          />
          <u-text
            text="优惠券"
            prefix-icon="coupon-fill"
            icon-style="font-size: 28rpx; color: #EC9B51; margin-right: 20rpx"
            lines="1"
            line-height="60rpx"
            color="#555555"
            size="28rpx"
          />
        </view>
        <view class="base-right">
          <view>
            <view class="price">
              <text>售价</text>
              <text>￥</text>
              <text>{{ detail.price }}</text>
            </view>
            <view class="sale"> 已售：{{ detail.sold_num }} </view>
          </view>
          <view @click="handleCoupon">
            <u-input
              v-model="coupon.name"
              disabled
              disabled-color="#ffffff"
              :placeholder="couponList.length > 0 ? '请选择优惠券' : '暂无优惠券'"
              font-size="28rpx"
              input-align="right"
              suffix-icon="arrow-right"
              suffix-icon-style="color: #909399"
              :placeholder-style="placeholderStyle"
              border="none"
            />
          </view>
        </view>
      </view>
      <Sub-title label="套餐图文" bottom-color="#E9F4F4" />
      <u-parse :content="detail.content" />
      <view class="btn">
        <view class="center-btn" :class="{ disabled: timeout }" @click="handlePay">
          提交订单
        </view>
      </view>
    </view>
    <Coupon-popup
      v-model="couponShow"
      :list="couponList"
      @close="closeCoupon"
      @confirm="confirmCoupon"
    />
  </view>
</template>

<script>
import Navbar from "@/components/Navbar/index";
import CouponPopup from "@/pages/home/cp/CouponPopup";

import { homePartyDetail, homeAddOrder } from "@/request/homeApi.js";
import { myCouponList } from "@/request/myApi.js";
export default {
  components: { Navbar, CouponPopup },
  data() {
    return {
      pageTitle: "", // 页面标题
      detail: {}, // 详情内容
      coupon: {}, // 优惠券信息
      couponShow: false, // 优惠券弹窗
      couponList: [], // 优惠券列表
    };
  },
  onLoad(e) {
    this.pageTitle = decodeURIComponent(e.title);
    this.getData(e.id);
  },
  computed: {
    // 是否已过期
    timeout() {
      let end = Number(new Date(this.detail.end_time + " 23:59:59"));
      let now = Number(new Date());
      return now > end;
    },
  },
  // 监听页面滚动
  onPageScroll(scroll) {
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  methods: {
    // 预览图片
    preImage() {
      uni.previewImage({
        urls: [this.detail.cover_img],
      });
    },
    // 点击拨号
    callPhone() {
      uni.makePhoneCall({
        phoneNumber: this.detail.phone,
      });
    },
    // 打开优惠券弹窗
    handleCoupon() {
      this.couponShow = true;
    },
    // 关闭优惠券弹窗
    closeCoupon() {
      this.couponShow = false;
    },
    // 选择优惠券
    confirmCoupon(v) {
      if (v.type == "reduction") {
        v.name = `满${Number(v.limit)}减${Number(v.price)}`;
      }
      if (v.type == "discount") {
        v.name = `满${Number(v.limit)}打${Number(v.discount)}折`;
      }
      if (v.choice) {
        this.coupon = v;
      } else {
        this.coupon = { name: "" };
      }
      this.couponShow = false;
    },
    // 获取优惠券列表
    getCouponList() {
      let data = {
        shop_id: 0, // 不需要指定店铺
        page: 1,
        state: 1,
        price: this.detail.price,
      };
      this.couponList = [];
      myCouponList(data).then((res) => {
        if (res.code == 1) {
          this.couponList = res.data.data;
        }
      });
    },
    // 跳转地图
    handleMap() {
      const { lat, lng, address } = this.detail;
      // uni.openLocation({
      //   latitude: lat,
      //   longitude: lng,
      //   address: address,
      //   scale: 16,
      // });
      uni.navigateTo({ url: `/pages/parse/map?lat=${lat}&lng=${lng}` });
    },
    // 获取详情
    getData(id) {
      homePartyDetail({ id }).then((res) => {
        if (res.code == 1) {
          this.detail = res.data;
          this.getCouponList();
        }
      });
    },
    // 提交订单
    handlePay() {
      if (this.timeout) {
        uni.showToast({
          title: "该活动已结束",
          icon: "none",
        });
        return;
      }
      this.$author(() => {
        let data = {
          type: "party",
          id: this.detail.id,
          coupon_id: this.coupon?.id,
          number: 1,
        };
        homeAddOrder(data).then((res) => {
          if (res.code == 1) {
            console.log(res.data);
            let { list, token } = res.data;
            uni.navigateTo({
              url: `/pages/mall/cashier?token=${token}&data=${JSON.stringify(list)}`,
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  .body {
    width: 100%;
    padding: 20rpx 20rpx 180rpx 20rpx;
    z-index: 8;
    min-height: 100rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: -80rpx;
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    .mark {
      position: absolute;
      top: -80rpx;
      right: 30rpx;
      width: 172rpx;
      height: 56rpx;
      color: #fff;
      font-size: 28rpx;
      line-height: 56rpx;
      text-align: center;
      border-radius: 40rpx;
      background-color: #0000006b;
    }
    .tag {
      position: absolute;
      right: 0;
      top: 40rpx;
      color: #fff;
      font-weight: 600;
      font-size: 32rpx;
      background-color: #3ba199cc;
      padding: 4rpx 24rpx;
      border-radius: 24rpx 0 0 24rpx;
    }
    .base {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      > view:first-child {
        flex: 1;
      }
      .base-right {
        > view:first-child {
          display: flex;
          height: 180rpx;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;

          .price {
            line-height: 60rpx;
            color: #ff3e3e;
            font-weight: 600;
            > text:first-child {
              font-size: 28rpx;
            }
            > text:nth-child(2) {
              font-size: 24rpx;
            }
            > text:last-child {
              font-size: 32rpx;
            }
          }
          .sale {
            line-height: 60rpx;
            color: $active-color;
            font-size: 24rpx;
            font-weight: 600;
          }
        }
        > view:last-child {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          text {
            color: #555555;
            font-size: 28rpx;
            margin-left: 12rpx;
          }
        }
      }
    }
  }
  .btn {
    position: fixed;
    background-color: #fff;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    height: 126rpx;
    padding: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9;
    .center-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      text-align: center;
      color: $active-color;
      background-color: #cee7e5;
      border-radius: 40rpx;
    }
    .disabled {
      color: #f9f9f9;
      background-color: #dbdbdb;
    }
  }
}
</style>
